<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../sencha-touch.css" type="text/css">

    <script type="text/javascript" src="../sencha-touch-debug-w-comments.js"></script>
    <script type="text/javascript" src="albumdata.js"></script>
    <script type="text/javascript" src="../UxBufList.js"></script>
<style type="text/css">
	.x-list .x-list-item {
		font-weight: bold;
		font-size: 100%;
		font-family:helvetica;
	}
</style>  
    <script type="text/javascript">
    Ext.setup({
        onReady : function() {
            Ext.regModel('Albums', {
                fields: ['album']
            });

            var baseConfig = {
                itemTpl: '{album}',
                grouped: true,		// optional
                indexBar: true,		// optional
                useGroupHeaders: false, // no group headers
  				maxItemHeight: 75,	// must specify
  				blockScrollSelect: true,
				batchSize: 10,

                store: new Ext.data.Store({
                    model: 'Albums',

                    getGroupString: function(record) {
                        return record.get('album')[0].toUpperCase();
                    }

//                    data: ListTestData
                })
                
            };

			var list;
            if (!Ext.is.Phone) {
                list = new Ext.ux.BufferedList(Ext.apply(baseConfig, {
                    floating: true,
                    width: 500,
                    height: 700,
                    centered: true,
                    modal: true,
                    hideOnMaskTap: false
                })).show();
            }
            else {
                list = new Ext.ux.BufferedList(Ext.apply(baseConfig, {
                    fullscreen: true
                }));
            }
			// test to see if data load is handled correctly
			list.store.loadData(ListTestData);
        }
    });
    </script>
</head>
<body></body>
</html>